<template>
	<div>
		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<span>用户管理</span>
				</li>
			</ul>
		</div>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="用户名">
				<el-input v-model="formInline.condition.username" placeholder="用户名"></el-input>
			</el-form-item>
			<el-form-item label="角色">
				<el-select v-model="formInline.condition.roleId" placeholder="角色">
					<el-option v-for="item in dataInfo.records" :key="item.id" :label="item.roleName" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" v-on:click="onSubmit">查询<i class="el-icon-search el-icon--right"></i></el-button>
			</el-form-item>
			<el-button type="primary" class="xj" @click="clickFn">新建<i class="el-icon-plus el-icon--right"></i></el-button>
		</el-form>
		<el-table :data="userlist.records" style="width: 100%">
			<el-table-column prop="username" label="用户名">
			</el-table-column>
			<el-table-column prop="policeNo" label="警号">
			</el-table-column>
			<el-table-column prop="idcard" label="身份证号">
			</el-table-column>
			<el-table-column prop="" label="头像">
				<template scope="scope">
					<img v-bind:src="scope.row.headPicture" class="pic" alt="">
				</template>
			</el-table-column>
			<el-table-column prop="mobile" label="手机号">
			</el-table-column>
			<el-table-column prop="name" label="姓名">
			</el-table-column>
			<el-table-column prop="role.roleName" label="角色">
			</el-table-column>
			<el-table-column prop="remark" label="备注">
			</el-table-column>
			<el-table-column inline-template label="操作" width="150">
				<template>
					<el-button type="primary" size='small' @click="detailUser(row)">修改</el-button>
					<el-button size="small" type="danger" @click="open2(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination v-if="userlist.totalPage>1" @current-change="handleCurrentChange" :current-page="formInline.pageNo" :page-count.sync="userlist.totalPage" :page-size="pagesize" layout="total, prev, pager, next" :total="userlist.totalRecords">
		</el-pagination>
		<el-dialog title="提示" :visible.sync="visible" size="tiny">
			<span>确定删除？</span>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="visible = false">取 消</el-button>
		    <el-button type="primary" @click="visible = false">确 定</el-button>
		  </span>
		</el-dialog>
	</div>

</template>

<script>
	import { UserSrv } from './user.service';
	import { RoleSrv } from "./../role/role.service";
	export default {
		data() {
			return {
				dataInfo: {},
				userlist: {},
				isopen: true,
				visible: false,
				pagesize: 10,
				//				pageindex:1,
				formInline: {
					condition: {
						username: '',
						roleId: ''
					},
					role: '',
					region: '',
					pageNo: 1,
					pageSize: 10
				}
			}
		},
		methods: {
			getRoleList() { //获取角色列表
				let params = {
					pageNo: 1,
					pageSize: 10
				}

				RoleSrv.list(params).then(req => {
					if(req.code === 0) {
						this.dataInfo = req.data;

					}

				})
			},
			onSubmit() { //查询
				this.getUserList();
			},
			detailUser(row) { //修改
				this.$router.push({
					name: 'usermodification',
					params: {
						id: row.id
					}
				});
			},
			deleteUser(index, row) { // 删除
				this.visible = true;
				console.log(index, row)
			},
			clickFn: function() { //新建
				this.$router.push('/usercreation');
			},
			handleCurrentChange(val) {
				this.formInline.pageNo = val;
				this.getUserList();
			},
			getUserList() {
				var params = this.formInline;
				UserSrv.getUserList(params).then((result) => {
					if(result.code === 0) {
						this.userlist = result.data;
					}
				})
			},
			deleteVersion(row) {
				UserSrv.deleteID(row.id).then((result) => {
					if(result.code === 0) {
						Notification.success({
                            title: "删除用户",
                            message: '操作成功',
                            offset: 50
                        })
						this.getUserList();

					}
				})
			},
			open2(row) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//                    this.$message({
					//                        type: 'success',
					//                        message: '删除成功!'
					//                    });
					this.deleteVersion(row);

				}).catch(() => {
					//                    this.$message({
					//                        type: 'info',
					//                        message: '已取消删除'
					//                    });
				});
			}
		},
		created() {
			this.getUserList();
			this.getRoleList();

		},
		mounted() {

		}
	}
</script>

<style scoped>
	.xj {
		float: right;
	}
	
	.el-form {
		margin-top: 10px;
	}
	
	.pic {
		width: 50px;
		height: 50px;
		padding: 5px;
	}
	
</style>